typeof muhawo == "undefined" && (muhawo = {});
var multiScreen = muhawo.multiScreen = {
    init: function(){
        var that = this;
        this.wrapper = document.getElementById("multiScreen-wrapper");
        this.content = document.getElementById("multiScreen-content");
        this.toolbar = document.getElementById("multiScreen-toolbar");
        this.itemTemplate = this.buildItemTemplate();
        this.bindEvents();
        this.items = [];
        var appcontent = document.getElementById("appcontent");
        appcontent.addEventListener("DOMContentLoaded", function(){
            that.processVideo();
        })
    },
    buildItemTemplate: function(){
            var item = document.createElement("box");
            item.className = "screen-item";
            item.setAttribute("flex", "1");
            return item;
    },
    bindEvents: function(){
        var that = this;
        var toolbar = this.toolbar;
        toolbar.addEventListener("click", function(event){
            var action = event.target.getAttribute("action");
            if(action){
                that.doToolAction(action);
            }
        })
        this.content.addEventListener("contextmenu", function(event){
            that.selectedBox = event.currentTarget;
            event.stopPropagation();
        })
        this.content.addEventListener("dragover", function(event){
            event.preventDefault();
        },true)
        this.content.addEventListener("dragenter", function(event){
            event.preventDefault();
        },true)
        this.content.addEventListener("drop",function(event){
            var data = event.dataTransfer;
            that.selectedBox = event.currentTarget;
            // event.stopPropagation();
            var objectHTML = data.getData("text/object");

            if(objectHTML){
                var iframe = document.createElement("iframe");
                iframe.setAttribute("flex", "1");
                // objectHTML = objectHTML.replace(/<([^\/])/g,"<html:$1").replace(/<\//g, "</html:");
                that.content.appendChild(iframe);
                setTimeout(function(){
                    iframe.contentDocument.body.innerHTML = objectHTML;
                },10);
                
            // console.log("eleHTML:"+objectHTML);
            //     div.innerHTML = objectHTML;
            }else{
                var link = data.getData("URL");
                if(link){
                    that.goto(link);
                }
            }
        },true)
        // window.addEventListener("mouseup", function(event){
        //     console.log(event.target);
        //     event.target.innerHTML = that.object.outerHTML;
        // })
        // this.content.addEventListener("mouseover", function(event){
        //     console.log(event.target.tagName);
        //     event.target.style.background = "red";
        //     // that.object && that.selectedBox.appendChild(that.object);
        // })
        // window.addEventListener("mouseup", function(){
        //     that.object && (delete that.object);
        // })
        // window.addEventListener("mousedown", function(event){
        //     console.log(event.target.tagName);
        //     if(event.target.tagName == "OBJECT"){
        //         that.object = event.target;
        //         event.stopPropagation();
        //         event.preventDefault();
        //     }
        // },true)
    },
    doToolAction: function(action){
        this["action_"+action]();
    },
    action_add: function(orient){
        var selectedBox = this.selectedBox;
        parentBox = this.getParentBox(selectedBox,orient);
        if(orient && parentBox.children.length == 0){
            var i = this.itemTemplate.cloneNode(true)
            this.items.push(i);
            parentBox.appendChild(i);
            bindEvents(i)
        }
        if(orient){
            var splitter = document.createElement("splitter");
            parentBox.appendChild(splitter);
        }
        var i = this.itemTemplate.cloneNode(true)
        this.items.push(i);
        parentBox.appendChild(i);
        bindEvents(i);

        var that = this;
        function bindEvents(ele){
            ele.addEventListener("click", function(event){
                that.selectedBox = event.currentTarget;
                event.stopPropagation();
            })
            ele.addEventListener("contextmenu", function(event){
                that.selectedBox = event.currentTarget;
                event.stopPropagation();
            })
            ele.addEventListener("drop",function(event){
                that.selectedBox = event.currentTarget;
                event.stopPropagation();
                var link = event.dataTransfer.getData("URL");
                if(link){
                    that.goto(link);
                }

            })
        }
    },
    action_delete: function(){
        var selectedBox = this.selectedBox;
        var parentNode = selectedBox.parentNode;
        var splitter = selectedBox.previousElementSibling || selectedBox.nextElementSibling;
        selectedBox && selectedBox.id != "multiScreen-content" && parentNode.removeChild(selectedBox);
        splitter && parentNode.removeChild(splitter);
        if(selectedBox.id == "multiScreen-content" && selectedBox.children.length == 0){
            selectedBox.removeAttribute("orient");
        }
    },
    action_clear: function(){
        var eles = this.content.children;
        var len = eles.length;
        len--;
        for(; len >= 0; len--){
            this.content.removeChild(eles[len]);
        }
        this.content.removeAttribute("orient");
        this.items = [];
        // this.wrapper.removeChild(this.content);
        // this.content = document.createElement("vbox");
        // this.content.id = "multiScreen-content";
        // this.content.setAttribute("flex", "1");
        // this.wrapper.insertBefore(this.content, this.toolbar.parentNode);
        // this.items = [];
    },
    action_newPage: function(parentBox){
        this.action_add();
        var newItem = this.items[this.items.length-1];
        var text =  "<vbox flex='1'>"+
                    "<toolbar>"+
                        "<toolbaritem>"+
                            "<hbox>"+
                                "<textbox class='multiScreen-input'>"+
                                "</textbox>"+
                                "<toolbarbutton label='goto' oncommand='multiScreen.goto();'/>"+
                            "</hbox>"+
                        "</toolbaritem>"+
                    "</toolbar>"+
                    "<iframe flex='1' src='http://www.hao123.com'/>"+
                    "</vbox>";

        newItem.innerHTML = text;
        parentBox.className = parentBox.className.replace("screen-item", "screen-container");
        parentBox.appendChild(newItem);
    },
    goto: function(url){
        var adr = this.selectedBox.querySelector(".multiScreen-input");
        if(!adr){
            this.action_newPage(this.selectedBox);
        }
        if(!url){
            url = this.selectedBox.querySelector(".multiScreen-input").value;
        }
        if(url){
            if(!url.match(/^(http|ftp)/)) {
                if(url.split("/")[0].split(".").length == 2){
                    url = "http://www."+url;
                }
                if(url.split("/")[0].split(".").length == 3){
                    url = "http://"+url;
                }
            }
            this.selectedBox.querySelector("iframe").setAttribute("src", url);
        }
    },
    getParentBox: function(ele,orient){
        console.log(ele);
        var item = null;
        var container = null;
        while(ele.id !== "multiScreen-wrapper"){
            if(ele.className.match(/(^|\s+)screen-item($|\s+)/)) {
                item = ele;
            }
            if(ele.className.match(/(^|\s+)screen-container($|\s+)/)){
                container = ele;
                break;
            }
            ele = ele.parentNode;
        }

        !container && !item && (item = this.content);
        if(container && (!container.getAttribute("orient") || container.getAttribute("orient") == orient)){
            orient && container.setAttribute("orient", orient);
            return container;
        }else{
            orient && item.setAttribute("orient", orient);
            item.className = item.className.replace("screen-item", "screen-container");
            return item;
        }
    },
    processVideo: function(){
        var doc = content.document;
        var objects = doc.querySelectorAll("object");
        var that = this;
        for(var i= 0; i < objects.length;i++){
            // objects[i].setAttribute("draggable", true);
            var param = doc.createElement("param");
            param.setAttribute("name", "wmode");
            param.setAttribute("value", "transparent");
            objects[i].appendChild(param);
            objects[i].parentNode.setAttribute("draggable", "true");
            objects[i].parentNode.addEventListener("dragstart", function(event){
                event.dataTransfer.setData("text/object", event.target.outerHTML);
            })
            // objects[i].addEventListener("mousedown", function(event){
            //     that.object = event.target;//存在出发多次的问题
            //     event.stopPropagation();
            //     event.preventDefault();
            // },true)
            objects[i].addEventListener("dragstart", function(event){
                event.dataTransfer.setData('text/html', "<div>hello youku!</div>");
                console.log(event.target.outerHTML);
                event.stopPropagation();
                event.preventDefault();
            })
        }
    }
}
window.addEventListener("load", function(){
    multiScreen.init();
})
//<param name="wmode" value="transparent">